<template>
    <el-dialog title="客户模板" :close-on-click-modal="false" :visible.sync="visible" class="SHZY-dialog SHZY-dialog_center"
        lock-scroll width="70%">

        <el-row class="SHZY-common-search-box" :gutter="24">
            <el-form @submit.native.prevent="">
                <el-col :span="6">
                    <el-form-item label="客户">
                            <el-input v-model="query.customer" placeholder="客户" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="18">
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
                        <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
                        <el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()"
                            style="float: right;">新增</el-button>
                    </el-form-item>
                </el-col>
            </el-form>
        </el-row>
        <el-table v-loading="listLoading" :data="list" height="450px" @sort-change='sortChange' custom-column>
            <el-table-column label="客户编号" prop="customerCode" align="left"  sortable='customerCode' show-overflow-tooltip>
            </el-table-column>
            <!-- <el-table-column label="客户名称" prop="customerName" hidden align="left" sortable='custom'>
            </el-table-column> -->
            <el-table-column label="有效标志" prop="enabledMark"   align="center">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.enabledMark == '正常' ? 'success' : 'danger'" disable-transitions>
                        {{ scope.row.enabledMark == "正常" ? "正常" : "停用" }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                    <el-button type="text" @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>
                    <el-button type="text" @click="handleDel(scope.row.id)" class='SHZY-table-delBtn'>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
            @pagination="initData" />
        <br>
        <SHZY-Form v-if="formVisible" ref="SHZYForm" @refresh="refresh" />
    </el-dialog>
</template>
<script>
import { getPrintTemplateCustomerList, delPrintTemplateCustomer } from '@/api/common/printTemplateCustomer'
import SHZYForm from './CustomerForm'
export default {
    components: { SHZYForm },
    props: [],
    data() {
        return {
            btnLoading: false,
            loading: false,
            visible: false,
            templateId:'',
            query: {
                customer: undefined,
            },
            list: [],
            listLoading: true,
            multipleSelection: [],
            total: 0,
            listQuery: {
                currentPage: 1,
                pageSize: 20,
                sort: "desc",
                sidx: "",
            },
            formVisible: false,
        }
    },
    computed: {},
    watch: {},
    created() {
       
    },
    mounted() {
    },
    methods: {
        goBack() {
            this.$emit('refresh')
        },
        init(id) {
            this.templateId = id || 0
            this.visible = true;
            this.$nextTick(() => {
                this.initData()
            });
        },
        sortChange({ column, prop, order }) {
            this.listQuery.sort = order == 'ascending' ? 'asc' : 'desc'
            this.listQuery.sidx = !order ? '' : prop
            this.initData()
        },
        initData() {
            this.listLoading = true;
            let _query = {
                ...this.listQuery,
                ...this.query,
                menuId: this.menuId,
                templateId:this.templateId
            };
            let query = {}
            for (let key in _query) {
                if (Array.isArray(_query[key])) {
                    query[key] = _query[key].join()
                } else {
                    query[key] = _query[key]
                }
            }
            getPrintTemplateCustomerList(query).then(res => {
                this.list = res.data.list
                this.total = res.data.pagination.total
                this.listLoading = false
            })
        },
        handleDel(id) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                type: 'warning'
            }).then(() => {
                delPrintTemplateCustomer(id).then(res => {
                    this.$message({
                        type: 'success',
                        message: res.msg,
                        onClose: () => {
                            this.initData()
                        }
                    });
                })
            }).catch(() => {
            });
        },
        addOrUpdateHandle(id) {
            this.formVisible = true
            this.$nextTick(() => {
                this.$refs.SHZYForm.init(id, this.templateId)
            })
        },
        search() {
            this.listQuery = {
                currentPage: 1,
                pageSize: 20,
                sort: "desc",
                sidx: "",
            }
            this.initData()
        },
        refresh(isrRefresh) {
            this.formVisible = false
            if (isrRefresh) this.reset()
        },
        reset() {
            for (let key in this.query) {
                this.query[key] = undefined
            }
            this.listQuery = {
                currentPage: 1,
                pageSize: 20,
                sort: "desc",
                sidx: "",
            }
            this.initData()
        }
    }
}
</script>
